<template>
  <div class="pt-20">
     <a-form
        ref="formRef"
        :model="formState"
        :rules="rules"
        :label-col="{ span: 8 }"
        :wrapper-col="{ span: 16 }"
        autocomplete="off"
      >
        <a-form-item label="申请人" name="username">
          <a-input v-model:value="formState.username" style="width: 280px"/>
        </a-form-item> 

     
        <a-form-item label="类型" name="selectValue">
          <a-select
            ref="select"
            v-model:value="selectValue"
            placeholder="选择类型"
            style="width: 120px"
            show-search
            :options="selectOptions"
            :filter-option="filterOption"
            @change="selectChange"
          >
          </a-select>
        </a-form-item>

        <a-form-item label="日期" name="dateValue">
          <a-range-picker
            v-model:value="formState.dateValue"
            @change="dateChange"
          />
        </a-form-item>

        <a-form-item label="展示电子签章" name="signature">
          <a-switch v-model:checked="checked" />
        </a-form-item>


      </a-form>
  </div>
  <div class="flexCenter" style="width:100%" v-if="checked">
    <div style="width: 80%">
      <iframe
        id="ifra2"
        src="http://192.168.1.106:8080/yun/"
        frameborder="0"
        style="width: 100%; height: calc(100vh - 30px)"
      ></iframe>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref,reactive ,watch} from "vue";
const formState = reactive({
  username: "",
  password: "",
  remember: true,
  uploadFileList: [],
  selectValue: undefined,
  dateValue: undefined,
});

let download = async (_rule, value) => {
  console.log(uploadFlag.value);
  if (uploadFlag.value === false) {
    return Promise.reject("请上传文件");
  } else {
    return Promise.resolve();
  }
};

const rules = {
  username: {
    required: true,
    min: 3,
    max: 36,
    message: "申请人长度需为3~36之间",
  },
  download: {
    required: true,
    validator: download,
    trigger: "change",
  },
  selectValue: {
    required: true,
    message: "请选择类型",
    trigger: "change",
  },
  dateValue: {
    required: true,
    message: "请选择日期",
    trigger: "change",
  },
};
const formRef = ref();

 const checked = ref(false);
//选择器
const selectOptions = ref([
  {
    value: "1",
    label: "a类型",
  },
  {
    value: "2",
    label: "b类型",
  },
]);

const filterOption = (input, option) => {
  return option.label.toLowerCase().indexOf(input.toLowerCase()) >= 0;
};
const selectChange = (value) => {
  formState.selectValue = value;
};

//日期选择器
const dateChange = (value) => {
  if (value) {
    console.log(dayjs(value[0]).format("YYYY-MM-DD"));
    console.log(dayjs(value[1]).format("YYYY-MM-DD"));
  }
};

const submitForm = () => {
  formRef.value
    .validate()
    .then(() => {
      
    })
    .catch((error) => {
     
    });
};


watch(
  () => checked.value,
  (newVal, oldVal) => {
    // console.log(12111);
    // console.log(newVal, oldVal);
  },
  // { immediate: true }
);

</script>

<style lang="scss" scoped>
a{
  display:none !important;
}
</style>
